<template>
  <!--中层-->
  <div class="container" ref="wrap">
    <div class="wrap">
      <cast></cast>
      <div class="center">
        <!--分类-->
        <div class="user">
          <div class="use" v-for="(val, key) in use" :key="key">
            <img :src="val.img" alt="">
            <p>{{val.title}}</p>
          </div>
        </div>
        <!--血拼-->
        <div class="shop">
          <!--今日必拼-->
          <div class="spell">
            <div class="spell_top">
              <img src="./image/icons/flash.png" alt="">
              <span @click="homes">今日必拼</span>
              <div class="times">
                <span class="time">14</span>
                <span class="num">:</span>
                <span class="time">23</span>
                <span class="num">:</span>
                <span class="time">08</span>
                <span class="num">.</span>
                <span class="time_color">5</span>
              </div>
              <router-link class="more" to="./more">
                <span class="goToday">更多</span>
                <img src="./image/icons/goToday.png" alt="">
              </router-link>
            </div>
            <div class="spell_center">
              <swiper :options="swiperOption" ref="mySwiper">
                <!--<swiper-slide v-for="(val, slide) in swiperSlides" :key="slide">&lt;!&ndash;<div>{{val}}</div>&ndash;&gt;{{val}}</swiper-slide>-->
                <div class="swiper-slide" v-for="(val, list) in lister" :key="list">
                  <img :src="val.img" alt="">
                  <div class="slid">
                    <p>拼<span>￥</span><span>5.5</span></p>
                    <p>拼<span>￥</span><span>5.5</span></p>
                    <p>拼<span>￥</span><span>5.5</span></p>
                    <p>拼<span>￥</span><span>5.5</span></p>
                  </div>
                </div>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div>
          </div>
          <!--热拼-->
          <div class="hot_spell">
            <div class="spell_top">
              <img src="./image/icons/ranking.png" alt="">
              <span>热拼榜</span>
            </div>
            <div class="spell_center" @click="spell">
              <div class="spelled" v-for="(val, key) in spelled" :key="key">
                <img :src="val.img" alt="">
                <p class="spell_title">{{val.title}}</p>
                <p class="spell_font">{{val.font}}</p>
                <span>{{val.span}}</span>
              </div>
            </div>
          </div>
        </div>
        <!--热卖-->
        <div class="sell">
          <img src="./image/icons/star.png" alt="">
          <span>精选热卖</span>
        </div>
        <!--商品-->
        <div class="goods">
          <div class="good" v-for="(val, key) in good" :key="key">
            <img :src="val.img" alt="" @click="detail">
            <div class="good_right">
              <p>{{val.title}}</p>
              <p>
                <span>{{val.aroma}}</span>
                <span>{{val.time}}</span>
                <span>{{val.conk}}</span>
              </p>
              <p>{{val.active}}</p>
              <p>{{val.yet}}</p>
              <p>￥<span>{{val.num}}</span></p>
              <p>{{val.start}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cast from '../../components/pages/cast'
import BScroll from 'better-scroll'
export default {
  name: 'center',
  data () {
    return {
      swiperSlides: [
        {img: require('./image/banner/155905092269162676_wps.png')},
        {img: require('./image/banner/0656d00fcccc4a618eee1f4811fddc7b_th.jpg')},
        {img: require('./image/banner/8e54925342144841a82058a7d825c07a.jpg')},
        {img: require('./image/banner/64f433861ebe4e3b917b25c84d3b7953.jpg')},
        {img: require('./image/banner/3ea58547dfe54657bac3e079ee86fae2.jpg')}
      ],
      use: [
        {title: '每日签到', img: require('./image/icons/155745615565685465.png')},
        {title: '一元邀新', img: require('./image/icons/155745620576685615.png')},
        {title: '砍价团', img: require('./image/icons/155745633201413553.png')},
        {title: '1分好礼', img: require('./image/icons/155745634336643149.png')},
        {title: '拼购国际', img: require('./image/icons/155367739181460729.png')},
        {title: '8.8包邮', img: require('./image/icons/155849473466877746.png')},
        {title: '食品超市', img: require('./image/icons/155745638811844821.png')},
        {title: '母婴馆', img: require('./image/icons/155911181443788272.gif')},
        {title: '生活家电', img: require('./image/icons/155298317461154674.png')},
        {title: '特色馆', img: require('./image/icons/155745636672018807.png')}
      ],
      lister: [
        {img: require('./image/banner/title.png')},
        {img: require('./image/banner/title.png')},
        {img: require('./image/banner/title.png')}
      ],
      swiperOption: {
        // autoplay: {
        //   // 用户操作之后是否禁止
        //   disableOnInteraction: true
        // },
        autoplay: false,
        preventLinksPropagation: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      },
      spelled: [
        {img: require('../pages/image/icons/155911181443788272.gif'), title: '婴童服饰榜', font: '3.6万+人次购买', span: '拼榜'},
        {img: require('../pages/image/icons/155911181443788272.gif'), title: '婴童服饰榜', font: '3.6万+人次购买', span: '拼榜'},
        {img: require('../pages/image/icons/155911181443788272.gif'), title: '婴童服饰榜', font: '3.6万+人次购买', span: '拼榜'}
      ],
      good: [
        {img: require('../../components/pages/image/banner/bread.png'), title: '双荣 原味手撕面包1000g 糕点 办公室休闲零食 小点心', aroma: '奶香浓郁  |', time: '日期新鲜  |', conk: '工厂直发', active: '满10用1', yet: '已拼7080件', num: 15.8, start: '立即开抢'},
        {img: require('../../components/pages/image/banner/bread.png'), title: '双荣 原味手撕面包1000g 糕点 办公室休闲零食 小点心', aroma: '奶香浓郁  |', time: '日期新鲜  |', conk: '工厂直发', active: '满10用1', yet: '已拼7080件', num: 15.8, start: '立即开抢'},
        {img: require('../../components/pages/image/banner/bread.png'), title: '双荣 原味手撕面包1000g 糕点 办公室休闲零食 小点心', aroma: '奶香浓郁  |', time: '日期新鲜  |', conk: '工厂直发', active: '满10用1', yet: '已拼7080件', num: 15.8, start: '立即开抢'},
        {img: require('../../components/pages/image/banner/bread.png'), title: '双荣 原味手撕面包1000g 糕点 办公室休闲零食 小点心', aroma: '奶香浓郁  |', time: '日期新鲜  |', conk: '工厂直发', active: '满10用1', yet: '已拼7080件', num: 15.8, start: '立即开抢'}
      ]
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    detail () {
      this.$router.push({path: '/detail'})
    },
    spell () {
      this.$router.push({path: '/detail'})
    },
    homes () {
      this.$router.push({path: '/homes'})
    }
  },
  mounted () {
    let pointer = this.swiper.pagination.bullets
    for (let i = 0; i < pointer.length; i++) {
      pointer[i].style.width = '10px'
      pointer[i].style.height = '4px'
      pointer[i].style.background = '#ef4e44'
    }
    let wrap = this.$refs.wrap
    console.log(wrap.style.transform)
    let scroll = new BScroll(wrap, {
      click: true,
      screenY: true,
      bounce: false
    })
    return scroll
  },
  components: {cast}
}
</script>

<style scoped lang="scss">
  .container{
    width: 100vw;
    height: 100vh;
    .wrap{
      height: 245vh;
      .center{
        width: 1165px;
        margin-left: 40px;
        border-radius: 30px;
        .user{
          height: 540px;
          border-radius: 30px;
          background: #ffffff;
          .use{
            width: 18.5vw;
            height: 270px;
            display: inline-block;
            padding: 24px 24px;
            box-sizing: border-box;
            img{
              padding-left: 25px;
              width: 140px;
              height: 140px;
            }
            p{
              width: 190px;
              margin-top: 20px;
              font-size: 32px;
              text-align: center;
            }
          }
        }
        .shop{
          height: 1160px;
          margin-top: 35px;
          background: #ffffff;
          border-radius: 30px;
          .spell{
            height: 585px;
            border-bottom: solid 1px #f3f3f3;
            padding: 0 30px;
            .spell_top{
              display: flex;
              margin-left: 20px;
              padding-top: 45px;
              position: relative;
              img{
                width: 45px;
                height: 45px;
                margin: 10px 18px 0 0;
              }
              span{
                font-size: 48px;
              }
              .times{
                width: 282px;
                height: 48px;
                margin: 8px 0 0 25px;
                display: flex;
                .time, .time_color{
                  width: 48px;
                  line-height: 48px;
                  display: inline-block;
                  color: #ffffff;
                  font-size: 25px;
                  text-align: center;
                  border-radius: 10px;
                }
                .time{
                  background: #4d4d4d;
                }
                .time_color{
                  background: #e85140;
                }
                .num{
                  width: 28px;
                  text-align: center;
                  margin-top: -15px;
                }
              }
              .more{
                display: flex;
                position: absolute;
                top: 30px;
                right: 25px;
                text-decoration: none;
                .goToday{
                  font-size: 32px;
                  margin: 4px 20px 0 0;
                  color: #7e7e7e;
                }
                img{
                  width: 42px;
                  height: 42px;
                }
              }
            }
            .spell_center{
              height: 450px;
              margin-top: 30px;
              .swiper-wrapper{
                width: 1240px;
                .swiper-slide{
                  width: 100vw;
                  height: 450px;
                  position: relative;
                  img{
                    width: 100vw;
                    height: 265px;
                  }
                  .slid{
                    display: flex;
                    margin-top: 62px;
                    p{
                      font-size: 34px;
                      width: 25vw;
                      text-align: center;
                    }
                    span{
                      color: #f1635f;
                    }
                    span:nth-child(1){
                      font-size: 27px;
                    }
                    span:nth-child(2){
                      font-size: 40px;
                      font-weight: bold;
                    }
                  }
                }
              }
            }
          }
          .hot_spell{
            height: 570px;
            border-top: solid 1px #f3f3f3;
            padding: 0 30px;
            .spell_top {
              display: flex;
              margin-left: 20px;
              padding-top: 25px;
              img {
                width: 45px;
                height: 45px;
                margin: 10px 18px 0 0;
              }
              span {
                font-size: 48px;
              }
            }
            .spell_center{
              width: 350px;
              display: flex;
              .spelled{
                width: 350px;
                height: 438px;
                display: inline-block;
                border: solid 3px #f2d4d6;
                margin: 20px 15px 0 5px;
                border-radius: 20px;
                position: relative;
                img{
                  width: 265px;
                  height: 265px;
                  display: inline-block;
                  margin: 15px 40px 0 40px;
                }
                p{
                  height: 65px;
                  line-height: 65px;
                  color: #ff6f68;
                }
                .spell_title{
                  background: #fae8e6;
                  border-radius: 30px;
                  font-size: 36px;
                  text-align: center;
                  margin: 0 40px 10px 40px;
                }
                .spell_font{
                  width: 350px;
                  color: #818181;
                  font-size: 30px;
                  text-align: center;
                }
                span{
                  width: 125px;
                  height: 65px;
                  font-size: 30px;
                  position: absolute;
                  top: 0;
                  left: 18px;
                  background: #f06443;
                  text-align: center;
                  color: #ffffff;
                }
              }
            }
          }
        }
        .sell{
          height: 80px;
          display: flex;
          margin-left: 425px;
          margin-top: 36px;
          img{
            width: 66px;
            height: 66px;
            margin-right: 15px;
          }
          span{
            font-size: 50px;
            color: #e45547;
            font-weight: bold;
          }
        }
        .goods{
          width: 1160px;
          overflow: hidden;
          .good{
            height: 538px;
            background: #ffffff;
            border-radius: 35px;
            margin-top: 28px;
            display: flex;
            padding: 38px 0 0 30px;
            box-sizing: border-box;
            img{
              width: 465px;
              height: 450px;
              margin-right: 36px;
            }
            .good_right{
              display: inline-block;
              width: 610px;
              height: 450px;
              position: relative;
              p:nth-child(1){
                width: 595px;
                font-size: 43px;
                font-weight: bold;
                margin-bottom: 30px;
              }
              p:nth-child(2){
                width: 630px;
                font-size: 36px;
                color: #a6a6a6;
                margin-bottom: 34px;
                span{
                  width: 100px;
                  font-size: 12px;
                }
              }
              p:nth-child(3){
                width: 200px;
                line-height: 48px;
                background: #fbede4;
                color: #e76029;
                text-align: center;
                font-size: 26px;
                border-radius: 10px;
                margin-bottom: 35px;
              }
              p:nth-child(4){
                font-size: 32px;
                margin-bottom: 24px;
                color: #989898;
              }
              p:nth-child(5){
                font-size: 20px;
                font-weight: bold;
                color: #ee665a;
                span{
                  display: inline-block;
                  font-size: 50px;
                }
              }
              p:nth-child(6){
                width: 210px;
                line-height: 65px;
                position: absolute;
                right: 10px;
                bottom: 5px ;
                background: #ec4444;
                color: #ffffff;
                font-size: 40px;
                text-align: center;
                border-radius: 30px;
              }
            }
          }
        }
      }
    }
  }
</style>
